import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class WorldCsjAreaBarChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('WorldCsjBarChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 250,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  // [3.5, '日本大都市圈'],
  // [4.5, '英国城市群'],
  // [13.8, '大西洋城市群'],
  // [14.5, '欧洲大都市圈'],
  // [21.2, '长三角城市群'],
  // [24.5, '五大湖城市群']
  setChartData() {
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
      },
      angleAxis: {
        interval: 1,
        type: 'category',
        data: ['五大湖\n城市群',
          '长三角\n城市群',
          '欧洲\n大都市圈',
          '大西洋\n城市群',
          '英国\n城市群',
          '日本\n大都市圈'
        ],
        axisLine: {
          show: false,
          lineStyle: {
            width: 1,
            type: "solid",
            color: '#0177d4'
          }
        },
        splitLine: { show: false },
        z: 10,
        axisLabel: {
          interval: 0,
          show: true,
          margin: 8,
          fontSize: 11,
          // color: function (value, index) {
          //   return value == '长三角城市群' ? '#00feff' : '#fff';
          // }
        },
      },
      radiusAxis: {
        min: 0,
        max: 25,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: "solid",
            color: '#0177d4'
          }
        },
        axisLabel: {
          formatter: '{value}',
          show: true,
          // padding: [0, 0, 20, 0],
          fontSize: 10
        }
      },
      polar: {},
      series: [{
        type: 'bar',
        data: [{
          value: 24.5,
          itemStyle: {
            normal: {
              color: "#86c9f4"
            }
          }
        },
        {
          value: 21.2,
          itemStyle: {
            normal: {
              color: "#4da8ec"
            }
          }
        },
        {
          value: 14.5,
          itemStyle: {
            normal: {
              color: "#3a91d2"
            }
          }
        },
        {
          value: 13.8,
          itemStyle: {
            normal: {
              color: "#005fa6"
            }
          }
        },
        {
          value: 4.5,
          itemStyle: {
            normal: {
              color: "#315f97"
            }
          }
        },
        {
          value: 3.5,
          itemStyle: {
            normal: {
              color: "#0f375f"
            }
          }
        }
        ],
        coordinateSystem: 'polar',
      }],
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `城市群面积（单位：万平方公里）`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default WorldCsjAreaBarChart;
